<template>
	<div class="main" style="background:#f9f9f9" @scroll="handleScroll">
		<!-- <div class="header" id="header" :style="{ background:'rgba(00,00,00,'+opacity+')'}"> -->
		<div class="header" id="header" :style="{ background:'rgba(00,00,00,0.5)'}">

			<div style="display:flex;align-items:center;height:100%;width:90%">
				<img :src="icon.logo" class="logo" />
				<div class="tab_list">
					<div @click="selectTab(0)" :style="active=='0'?'border-bottom:1px solid #fff':'0px'">平台介绍</div>
					<div @click="selectTab(1)" :style="active=='1'?'border-bottom:1px solid #fff':'0px'">小红书推广</div>
					<div @click="selectTab(2)" :style="active=='2'?'border-bottom:1px solid #fff':'0px'">抖音推广</div>
					<div @click="selectTab(3)" :style="active=='3'?'border-bottom:1px solid #fff':'0px'">内容制作</div>
					<div @click="selectTab(4)">抖音带货</div>
				</div>
			</div>

			<!-- 右侧伪按钮 -->
			<div class="btn">
				<div class="header_btn">
					<div class="login" @click="handleLogin(1)">商家入口</div>
					<div class="register" @mouseover="handleLogin(0)" @mouseout="handleLogin(2)">达人入口</div>
				</div>
			</div>
		</div>
		<!-- 悬停小程序 -->
		<div class="wxapp" id="wxapp">
			<img :src="icon.wxapp" @mouseover="handleLogin(0)" @mouseout="handleLogin(2)" style="width:130px;height:130px" alt="">
		</div>
		<!-- 移动端适配 -->
		<div class="mobileHeader">
			<div class="left" @click="handleShowLeft(true)">
				<i class="ri-function-line" style=" color:#e93d4d; font-size: 24px;" ></i>
			</div>
			<div class="center">
				<img :src="icon.logo1" alt="">
				内容营销平台
			</div>
		</div>
		<!-- Drawer 抽屉组件 -->
		<Drawer title="" placement="left" :closable="false" v-model="showLeft" class-name="drawerStyle">
			<div class="drawer_header" slot="header">
				<Icon type="md-close" @click="handleShowLeft(false)" size="18" color="#fff" />
			</div>
			<div style="float:left;width:100%;height:100%">
				<ul class="mobile_left">
					<li id="firsttab" @click.prevent="selectTab(0)">平台介绍</li>
					<li @click="selectTab(1)">小红书推广</li>
					<li @click="selectTab(2)">抖音推广</li>
					<li @click="selectTab(3)">内容制作</li>
				</ul>
			</div>
		</Drawer>
		

	<onePageVue ref="onePage" @handleShowModal="handleShowModal" id="one" :tab="active"></onePageVue>
	<!-- 分割斑马线 -->
	<div class="stripe" style="float:left;width:100%;"></div>

	<!-- 内容营销服务平台 -->
	<sale-service id="saleService" v-show="active=='0'"></sale-service>

	<solute-task v-show="active=='0'"></solute-task>
	<ys-desc v-show="active=='0'"></ys-desc>
	<good-example id="goodExample" v-show="active=='0'"></good-example>
	<talent-list v-show="active=='0'"></talent-list>
	<cor-brand v-show="active=='0'"></cor-brand>



		<!-- 侧边固定卡片 -->
		<div class="contact_info">
			<div class="qrcode">
				<div>在线咨询</div>
				<div style="width:100%">
					<img id="contact" :src="icon.wx1" alt="">
					
					<div class="mobile">
						<span>手机号</span>
						<span>13246566476</span>
						<div class="copy" v-clipboard:copy="13246566476" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</div>
					</div>
					<div class="mobile">
						<span>微信号</span>
						<span>a2417276459</span>
						<div class="copy" v-clipboard:copy="'a2417276459'" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</div>
					</div>
				</div>
			
			</div>
		</div>



	</div>
</template>

<script>
	import '@/assets/css/main.css'
	import 'remixicon/fonts/remixicon.css'
	import slider from 'vue-concise-slider' // 引入slider组件

	// 第一页
	import onePageVue from '../components/firstPages/onePage.vue'
	import saleService from '../components/firstPages/saleService.vue'
	import soluteTask from '../components/firstPages/soluteTask.vue'
	import ysDesc from '../components/firstPages/ysDesc.vue'
	import goodExample from '../components/firstPages/goodExample.vue'
	import talentList from '../components/firstPages/talentList.vue'
	import corBrand from '../components/firstPages/corBrand.vue'

	// import secondPage from './page/secondPage.vue'
	// import thirdPage from './page/thirdPage.vue'
	
	
	// import fourthPage from './page/fourthPage.vue'
	// import fivethPage from './page/fivethPage.vue'
	// import sixthPage from './page/sixthPage.vue'
	// import sevenPage from './page/sevenPage.vue'
	// import eightPage from './page/eightPage.vue'
	// import videoPage from './page/video.vue'
	import axios from 'axios'
	export default {
		name: 'Main',
		components:{
			onePageVue,
			saleService,
			soluteTask,
			ysDesc,
			goodExample,
			talentList,
			corBrand
		},
		data() {
			return {
				beian:require('@/assets/beian.png'),
				img:{
				    yanshu:require('@/assets/颜述.png'),
				    contact1:require('@/assets/微信1.png'),
				    contact:require('@/assets/QQ.png'),
				    contact2:require('@/assets/微信1.png'),
				    contact3:require('@/assets/微信1.png'),
				},
				active: 0,
				actives: 0,
				contact: false,
				showLeft: false,
				show: true,
				showTab: false,
				showContact: false,
				fourShow: true,
				fivthShow: true,
				ifScroll: false,
				isContact: false,
				opacity: 0,
				pages: [{
						title: '',
						style: {
							background: 'url(https://res.redsay.net/admin/146/1587638528366.png)'
						}
					},
					{
						title: '',
						style: {
							background: 'url(https://res.redsay.net/admin/147/1583373908991.jpg)'
						}
					},
					{
						title: 'slide3',
						style: {
							background: '#4bbfc3',
						},
					}
				],
				icon: {
					wxapp: require('@/assets/wxapp.jpg'),
					// yantonggao2: require('@/assets/yantonggao2.png'),
					// ys8bao: require('@/assets/ys8bao.jpg'),
					web: require('@/assets/网站栏目.png'),
					talk: require('@/assets/在线咨询.png'),
					logo: require('@/assets/ys_logo.png'),
					logo1: require('@/assets/logo1.png'),
					QQ: require('@/assets/QQ.png'),

					// qrcode: require('@/assets/二维码.png'),
					// phone: require('@/assets/电话.png'),
					// top: require('@/assets/向上.png'),
					// login: require('@/assets/login_user.png'),
					wx1: require('@/assets/weixin.png'),
					// wx2: require('@/assets/weixin.png'),
					// contact1: require('@/assets/weixin.png'),
					// contact2: require('@/assets/weixin.png'),
					// contact3: require('@/assets/weixin.png'),
					// info: require('@/assets/信息.png'),
					// close: require('@/assets/close.png')
				},
				//滑动配置[obj]
				sliderinit: {
					currentPage: 0, //当前页码
					thresholdDistance: 500, //滑动判定距离
					thresholdTime: 100, //滑动判定时间
					autoplay: 1000, //自动滚动[ms]
					loop: true, //循环滚动
					direction: 'horizontal', //方向设置，垂直滚动
					infinite: 1, //无限滚动前后遍历数
					slidesToScroll: 1, //每次滑动项数
				},
				requestUrl: 'https://opt.redsay.net:8443/',
			}
		},
		methods: {
			
			//获取浏览器地址栏中?号后面的参数值
			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				let search = location.href.replace('%EF%BC%9F','?');
				console.log('s=',search)
				let value = search.substring(search.indexOf('?'),search.lastIndexOf('#'));
				var r = value.substr(1).match(reg);
				
				if (r != null) return unescape(r[2]);
				return null;
			},
			handleShowContact(e) {
				this.contact = e
			},
			handlePlayUl(e) {
				console.log(this.active)

				document.getElementById('firsttab').style.height = 'auto' //document.getElementById('tab').style.display==''||document.getElementById('tab').style.display=='block'?'40px':'auto'
				document.getElementById('tab').style.display = 'block' //document.getElementById('tab').style.display==''||document.getElementById('tab').style.display=='block'?'none':'block'
				if (this.active != '0') {
					this.active = 0
				}
			},
			handleShowLeft(e) {
				this.showLeft = e
			},
			handleClose() {
				this.isContact = false
			},
			handleShowModal() {
				this.isContact = true
			},
			onCopy(e) {
				this.isContact = false
				this.$Message.success('复制成功')
			},
			// 复制失败时的回调函数
			onError(e) {
				this.isContact = false
				this.$Message.error("抱歉，复制失败！")
			},
			handleShows() {
				this.show = false
			},
			handleShow(show) {
				this.showTab = show
			},
			_isMobile() {
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
				return flag;
			},
			handleLogin(type) {
				if (type == '1') {
					if (this._isMobile()) {
						this.$Modal.confirm({
							title: '提示',
							content: '暂不支持移动端设备,请到PC端打开',
							okText: '复制网址',
							cancelText: '取消',
							onOk: () => {
								let href = location.href;
								// console.log(href);
								this.$copyText(href).then(
									function(e) {
										console.log("复制成功")
									},
									function(e) {
										alert("复制失败!");
									}
								);
								this.$Message.info('复制成功');
							},
						})

					} else {

						let channel = sessionStorage.getItem('channel')
						if (channel) {
							  this.$router.push('/login')
						} else {
							// window.open('https://cloud.redsay.net/login/1?channel=101')
							this.$router.push('/login')
						}
						return
					}
				}
				if (type == '0') {
					document.getElementById('wxapp').style.display = 'block'
				}
				if (type == '2') {
					document.getElementById('wxapp').style.display = 'none'
				}
			},
			handleScroll(e) {
				this.opacity = e.target.scrollTop >= 80 ? 0.5 : 0
			},
			selectTab(num) {
				if (num == '4') {
					window.open("https://www.daihuobang.cn/")
					return
				}
				this.active = num
				this.actives = 0
				this.showLeft = false
				document.querySelector('#one').scrollIntoView(true)
			},
			turnTo(id, num) {
				this.actives = num
				this.active = 0
				document.getElementsByName('tab')[0].style.backgroundColor = this.active == '3' ? '#0a8789' : 'rgba(00,00,00,0)'
				document.querySelector('#' + id).scrollIntoView(true)

				this.showLeft = false
			},
			addRecord() {
				var that = this
				axios.post(that.requestUrl + 'shortVideo/accessReport', {
					type: 1
				}).then(function(res) {}).catch(function(error) {});
			}
		},
		mounted() {
			var that = this
			window.onresize = () => {
				//that.$router.go(0)
			}
				//获取地址参数渠道channel,是从百度进来的还是从360进来的,channel值为1=百度,2=360
				let channel = this.getQueryString('channel');
				console.log('channel', channel)
				if (channel) {
					sessionStorage.setItem('channel', channel)
				}
				
		},
		created() {
			
			if ((document.body.clientWidth || document.documentElement.clientWidth) < 600) {
				this.fourShow = true
				this.fivthShow = true
			}
			this.addRecord()
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.wxapp {
		position: fixed;
		top: 60px;
		right: 3%;
		display: none;
		z-index: 1;
		padding: 20px;
		background: #181e2b;
	}

	/*移动 */
.mobile_left {
		width: 100%;
		height: 100%;
		list-style: none;
	}

	.drawer_header {
		height: 40px;
		width: 100%;
		float: left;
		display: flex;
		justify-content: flex-end;
		padding: 0 8%;
		box-sizing: border-box;
		align-items: center;
		background: linear-gradient(to right, #fa586f, #fa586f);
	}

	.mobile_left ul {
		width: 100%;
		height: 80px;
		padding: 0;
		margin-bottom: 20px;
		list-style: none;
	}

	.mobile_left ul li {
		width: 100%;
		height: 40px !important;
		line-height: 40px;
		color: #a0a0a0;
		list-style: none;

	}

	.mobile_left li {
		width: 100%;
		height: 40px;
		list-style: none;
	}

	/* .mobile_left li:nth-child(1) {
		height: 25px;
	} */


	.stripe{
  width: 250px;
  height: 8px;
  background: repeating-linear-gradient(140deg,rgb(250, 250, 250) 0,rgb(255, 255, 255) 3px,rgb(205, 207, 218) 0,rgb(241, 242, 246) 4px)
	}
	.layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(71, 71, 71, 0.5);
		z-index: 101;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal {
		width: 35em;
		padding: 20px;
		min-width: 120px;
	}

	.modal img {
		width: 30px;
		margin-bottom: 5px;
		float: right;
	}

	.content {
		float: left;
		width: 100%;
		border-radius: 10px;
		padding: 2em;
		background: #fff;
		/* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
	}

	.content .txt {
		float: left;
		width: 100%;
		text-align: center;
		font-size: 1.3em;
	}

	.content .copy_line {
		float: left;
		width: 100%;
		align-items: center;
		display: flex;
		font-size: 1.1em;
		word-break: keep-all;
		justify-content: center;
		height: 50px;
		margin-top: 20px;
	}

	.content .copy {
		background: #414141;
		color: #fff;
		cursor: pointer;
		width: 6em;
		text-align: center;
		border-radius: 5px;
		height: 30px;
		margin-left: 5px;
		font-size: 0.8em;
		line-height: 30px;
	}

	.btn {
		width: auto;
		height: 100%;
		z-index: 99;
	}

	.contact {
		position: fixed;
		right: 0;
		background: #f1f1f1;
		width: 30px;
		top: 30%;
		display: flex;
		flex-direction: column;
	}

	.contact1 {
		position: fixed;
		right: 0;
		background: #ff3535;
		width: 130px;
		top: 25%;
		display: flex;
		align-items: center;
		height: 30px;
		color: #fff;
	}

	.contact1 div:nth-child(1) {
		width: 30px;
		height: 100%;
		display: flex;
		background: #d40001;
		align-items: center;
		justify-content: center;
	}

	.contact1 div:nth-child(2) {
		margin-left: 10px;
	}

	.contact img {
		width: 13px;
		height: 13px;
	}

	.contact div {
		height: 34px;
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: 1px solid #ccc;
		align-items: center;
	}

	.header span {
		margin-left: 10px;
		opacity: 0.8;
		font-weight: 600;
		margin-top: 5px;
		font-size: 1.2em;
		color: #fff;
	}

	.tab_list {
		width: 100%;
		height: 80%;
		float: left;
		margin-left: 30px;
	}

	/* .tab_list ul {
		height: 100%;
		width: auto;
		float: left;
	} */

	/* .tab_list ul li {
		display: flex;
		cursor: pointer;
		background: #181e2b;
		justify-content: center;
		align-items: center;
		list-style: none;
		height: 100%;
		width: 100%;
	} */

	/* .tab_list ul li:hover{
  background: #21293b;
} */

/* .tab_list div  */
	.main .tab_list div {
		width: 75px;
		color: #fff;
		cursor: pointer;
		height: 100%;
		padding: 0 5px;
		margin-left: 5%;
		font-size: 1em;
		justify-content: center;
		display: flex;
		align-items: center;
		float: left;
	}
/* .main .tab_list>a{
	background-color: #e93d4d;
} */
	.contact_info img {
		width: 100%;
		position: relative;
		animation: mylogo 0.5s ease 0s infinite alternate;
		/* Firefox: */
		-moz-animation: mylogo 0.5s ease 0s infinite alternate;
		/* Safari 和 Chrome: */
		-webkit-animation: mylogo 0.5s ease 0s infinite alternate;
		/* Opera: */
		-o-animation: mylogo 0.5s ease 0s infinite alternate;
	}

	.qrcode div:nth-child(1) {
		background: linear-gradient(to right, #e93d4d, #e93d4d);
		text-align: center;
		width: 100%;
		height: 33px;
		line-height: 33px;
		color: #fff;
	}

	.qrcode span {
		display: block;
		/* width: 100%; */
		font-size: 0.7em;
		color: #444;
		margin-top: -2px;
		text-align: center;
	}

	.qrcode .online {
		background: gray;
		color: #fff;
		border-radius: 10px;
		padding: 1px 5px;
		width: 80%;
		margin: 3px 10% 10px;
	}

	.contact_info .qrcode {
		float: left;
		/* padding: 5px 5px 0; */
		box-sizing: border-box;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	@media only screen and (max-width: 900px) {
		.header_btn {
			opacity: 0;
		}

		.header {
			padding: 0 3%;
		}
	}

	@media only screen and (max-width: 600px) {
		.mobile_contact {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			display: flex !important;
			padding: 15px 0;
			justify-content: center;
		}

		/* .mobile_contact .title {} */

		.banquan {
			margin-bottom: 65px;
		}

		.mobile_contact .contacts {
			width: 100%;
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
		}

		.contacts .nav {
			display: flex;
			flex-direction: column;
			height: 140px;
			justify-content: space-between;
			align-items: center;
			width: 50%
		}

		.contacts .addwx {
			width: 60%;
			font-size: 0.8em;
			padding: 3px 0;
			background: #414141;
			border: 1px solid #414141;
			color: #fff;
			border-radius: 20px;
			text-align: center
		}

		.contacts .call {
			width: 60%;
			font-size: 0.8em;
			padding: 3px 0;
			background: #fff;
			border: 1px solid #414141;
			color: rgb(5, 11, 25);
			border-radius: 20px;
			text-align: center
		}

		.mobile_contact .contact div {
			width: 40%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.mobile_contact .contact img {
			width: 20%;
		}

		.mobile_contact .btn {
			height: 32px;
			width: 70% !important;
			background: #414141;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1em;
			letter-spacing: 2px;
			border-radius: 30px;
		}

		.mobileHeader {
			position: fixed;
			top: 0;
			left: 0;
			color: #000;
			display: block !important;
			z-index: 999;
			height: 45px !important;
			background: rgba(255, 255, 255, 1);
			width: 100%;
			display: flex;
			padding: 2px 1%;
			font-weight: 600;
			justify-content: space-between;
			align-items: center;
		}

		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 15%;
		}

		.left img {
			width: 60px;
		}

		.center {
			float: left;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70%;
		}

		.center img {
			width: 30px;
			margin-right: 10px;
		}

		.mobile {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			align-items: center;
			padding: 2px 8px;
			flex-direction: column;
			justify-content: center;
		}

		.copy {
			background: #414141;
			width: 30px;
			text-align: center;
			cursor: pointer;
			font-size: 0.5em;
			color: #fff;
			height: 15px;
			line-height: 17px;
			border-radius: 5px;
		}

		.header {
			position: fixed;
			top: 0;
			left: 0;
			color: #fff;
			opacity: 0;
			z-index: 999;
			height: 45px !important;
			background: rgba(18, 20, 17, 0);
			width: 100%;
			display: none !important;
			padding: 0 3% !important;
			justify-content: space-between;
			align-items: center;
		}

		.header span {
			margin-left: 10px;
			opacity: 0;
			font-weight: 600;
			margin-top: 5px;
			font-size: 1em;
			color: #fff;
		}

		.tab_list {
			width: 200px;
			height: 100%;
			float: left;
		}

		.tab_list div {
			font-size: 0.7em;
		}

		.header_btn {
			float: left;
			height: 100%;
			opacity: 0;
			display: flex;
			align-items: center;
		}

		.logo {
			height: 20px !important;
			width: 60px !important;
		}

		.login img {
			width: 10px !important;
			height: 10px !important;
			margin-right: 5px;
		}

		.login {
			height: 25px !important;
			width: 60px !important;
			color: #fff;
			display: flex;
			justify-content: center;
			font-size: 12px !important;
			align-items: center;
			float: right;
			border: 1px solid #fff;
			border-radius: 20px;
			/* background:#127177 ; */
			margin-right: 15px !important;
			letter-spacing: 1px;
		}

		.register {
			height: 35px !important;
			width: 100px !important;
			letter-spacing: 1px;
			border: 1px solid #fff;
			color: #fff;
			display: flex;
			justify-content: center;
			font-size: 12px !important;
			align-items: center;
			float: right;
			border-radius: 20px;
			/* background:#fff;  */
		}

		.contact_info {
			position: fixed;
			right: 10px;
			overflow: hidden;
			background: #fff;
			width: 70px !important;
			top: 30%;
			z-index: 100;
			opacity: 0;
			display: none !important;
			font-size: 0.8em;
			border-radius: 10px;
			border: 1px solid #ededed;
		}

	}

	.main {
		height: 100%;
		width: 100%;
		overflow-y: auto;
	}

	.main::-webkit-scrollbar {
		display: none;
	}

	.logo {
		height: 32px;
		width: 80px;
	}

	.header0 {
		background: rgba(255, 255, 255, 1);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		height: 60px;
		width: 100%;
		display: flex;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
		padding: 0 5%;
		justify-content: space-between;
		align-items: center;
	}

	.header {
		position: fixed;
		top: 0;
		white-space: nowrap;
		left: 0;
		z-index: 999;
		height: 60px;
		background: rgba(18, 20, 17, 0);
		width: 100%;
		display: flex;
		padding: 0 3%;
		justify-content: space-between;
		align-items: center;
	}

	.login img {
		width: 15px;
		height: 15px;
		margin-right: 10px;
	}

	.login {
		height: 35px;
		width: 100px;
		color: #fff;
		display: flex;
		justify-content: center;
		font-size: 14px;
		align-items: center;
		float: right;
		border: 1px solid #fff;
		/* background:#127177 ; */
		margin-right: 25px;
		letter-spacing: 1px;
		border-radius: 4px;
	}

	.register {
		height: 35px;
		width: 100px;
		letter-spacing: 1px;
		border: 1px solid #fff;
		color: #fff;
		display: flex;
		justify-content: center;
		font-size: 14px;
		border-radius: 4px;
		align-items: center;
		float: right;
	}

	.header_btn {
		float: left;
		cursor: pointer;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/*滚动条样式*/
	.main::-webkit-scrollbar {
		width: 0;
	}

	.main::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: rgba(0, 0, 0, 0.2);
	}

	.main::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 0;
		background: rgba(0, 0, 0, 0.1);
	}

	.banquan {
		float: left;
		width: 100%;
		line-height: 30px;
		font-size: 10pt;
		text-align: center;
		background: #262626;
		color: #fff;
	}

	@media only screen and (min-height:700px) and (max-height:1200px) {
		.mobile_contact {
			display: none;
		}

		.mobileHeader {
			display: none;
		}

		.mobile {
			width: 100%;
			align-items: center;
			display: flex;
			box-sizing: border-box;
			padding: 2px 8px;
			justify-content: space-between;
		}

		.copy {
			background: #414141;
			width: 40px;
			text-align: center;
			cursor: pointer;
			font-size: 0.5em;
			color: #fff;
			height: 22px;
			line-height: 24px;
			border-radius: 10px;
		}

		.contact_info {
			position: fixed;
			right: 10px;
			overflow: hidden;
			background: #fff;
			width: 180px;
			top: 30%;
			border: 1px solid #ededed;
			z-index: 100;
			border-radius: 10px;
		}

		.btn {
			width: auto;
			z-index: 99;
		}
	}

	@media only screen and (min-height:300px) and (max-height:700px) {
		.mobile_contact {
			display: none;
		}

		.mobileHeader {
			display: none;
		}

		.mobile {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			align-items: center;
			padding: 2px 8px;
			justify-content: space-between;
		}

		.copy {
			background: #414141;
			width: 30px;
			text-align: center;
			font-size: 0.5em;
			cursor: pointer;
			color: #fff;
			height: 15px;
			line-height: 17px;
			border-radius: 5px;
		}

		.header {
			padding: 0 1% !important;
		}

		.btn {
			width: 0 !important;
			height: 100%;
			z-index: 99;
		}

		.contact_info {
			position: fixed;
			right: 10px;
			overflow: hidden;
			background: #fff;
			width: 160px;
			border: 1px solid #ededed;
			top: 30%;
			z-index: 100;
			border-radius: 10px;
		}
	}

	@keyframes mylogo {
		from {
			top: 1px;
		}

		to {
			top: -1px;
		}
	}

	@-moz-keyframes mylogo

	/* Firefox */
		{
		from {
			top: 1px;
		}

		to {
			top: -1px;
		}
	}

	@-webkit-keyframes mylogo

	/* Safari 和 Chrome */
		{
		from {
			top: 1px;
		}

		to {
			top: -1px;
		}
	}

	@-o-keyframes mylogo

	/* Opera */
		{
		from {
			top: 1px;
		}

		to {
			top: -1px;
		}
	}

	@media screen and (min-width: 500px) {

		/* .tab_list div{
    width: 105px;
  } */
		.header {
			padding: 0 3% !important;
		}
	}

	@media screen and (min-width: 400px) {
		.btn {
			width: 0 !important;
		}

		/* .tab_list div{
    width: 95px;
  } */
		.header {
			padding: 0 1% !important;
		}
	}

	@media screen and (min-width: 700px) {
		.btn {
			width: 0 !important;
		}

		.header {
			padding: 0 3% !important;
		}
	}

	@media screen and (min-width: 900px) {
		.btn {
			width: auto !important;
		}

		.header {
			padding: 0 3% !important;
		}
	}

	@media screen and (min-width: 1200px) {
		.btn {
			width: auto !important;
		}

		.header {
			padding: 0 3% !important;
		}
	}
</style>